<template>
	<h1>工位详情</h1>
	<h1>{{ STATION }}工位详情展示....</h1>
	<el-card class="field-box" v-for="(field, index) in fields" :key="index">
		<!-- 此处的key，就是数据对象的key键，也就是每个分领域的字符串，如guowangbuliang， torque等 -->
		<el-tag>{{ field.fieldName }}</el-tag>
		<el-table :data="field.data">
			<el-table-column v-for="(col, colIndex) in field.columns " :key="colIndex" :prop="col.prop" :label="col.label">
			</el-table-column>
		</el-table>
		<el-pagination background layout="prev, pager, next, total" :total="field.pagination.total"
			page-size="field.pagination.page_size" @current-change="handleCurrentChange(field, $event)" hide-on-single-page
			v-model:current-page="field.pagination.page" />
	</el-card>
</template>

<script lang="ts" setup name="StationDetail">
import { onMounted, ref, reactive } from 'vue';
import * as station_api from '../api';

import * as guowangbuliang_api from '/@views/station/guowangbuliang/api';
// import * as weldspot_handian_api from '../../weldspot/handian/api';
import * as weldspot_handian_api from '/@views/station/weldspot/handian/api';
import * as pbom_api from '/@views/station/pbom/api'

import { useRoute } from 'vue-router'

const route = useRoute();
const STATION = route.query.station;

type Field_Interface = {
	fieldName: string,
	api: any,
	columns: Array<{ prop: string, label: string }>,
	data?: any,
	pagination?: any

}

const guowangbuliang: Field_Interface = reactive({
	fieldName: '过往不良',
	api: guowangbuliang_api,
	pagination: {},
	columns: [
		{ prop: 'station', label: '工位' },
		{ prop: 'wen_ti_fen_lei', label: '问题分类' },
		{ prop: 'wen_ti_miao_shu', label: '问题描述' },
		{ prop: 'PCR_dan_hao', label: 'PCR单号' },
		{ prop: 'duan_dian_hao', label: '断点号' },
		{ prop: 'guan_bi_shi_jian', label: '关闭时间' },
	],
});
const weldspot_handian: Field_Interface = reactive(
	{
		fieldName: '点焊_焊点',
		api: weldspot_handian_api,
		pagination: {},
		columns: [
			{ prop: 'station', label: '工位' },
			{ prop: 'han_dian_bian_hao', label: '焊点编号' },
			{ prop: 'ling_bu_jian_hao', label: '零部件号' },
			{ prop: 'han_dian_xing_shi', label: '焊点形式' },
			{ prop: 'han_qiang_she_bei_bian_hao', label: '焊枪设备编号' },
			{ prop: 'han_qiang_xing_hao', label: '焊枪型号' },
		],
	});

const pbom: Field_Interface = reactive({
	fieldName: 'Pbom信息',
	api: pbom_api,
	pagination: {},
	columns: [
		{ prop: 'station', label: '工位' },
		{ prop: 'ling_bu_jian_hao', label: '零部件号' },
		{ prop: 'ling_bu_jian_zhong_wen_ming_cheng', label: '中文名称' },
		{ prop: 'ling_bu_jian_ying_wen_ming_cheng', label: '英文名称' },
		{ prop: 'C62XLV2', label: 'C62X-LV2' },
		{ prop: 'C62XLV3', label: 'C62X-LV3' },
		{ prop: 'C62XLV4', label: 'C62X-LV4' },
		{ prop: 'C62XLV1MT', label: 'C62X-LV1 MT' },
		{ prop: 'C62XLV17DCT', label: 'C62X-LV1-7DCT' },
	]
})

// 设置将要遍历的领域列表
const fields = [guowangbuliang, weldspot_handian, pbom];

const handleCurrentChange = async (field: any, page: number) => {
	console.log('field:', field)
	console.log('page:', page)
	console.log('STATION:', STATION)
	let res = await field.api.GetList({ station: STATION, page: page })

	field.data = res.data;
	// field.pagination.page_count = Math.floor(res.total / res.limit) + 1;
	field.pagination.total = res.total
	field.pagination.page_size = res.limit;
	field.pagination.page = res.page;

}


onMounted(() => {

	fields.forEach(async (field) => {
		// let res = await field.api.GetList({ station: STATION });
		let res = await field.api.GetList({ station: STATION });
		console.log('res:', res)
		field.data = res.data;

		// field.pagination.page_count = Math.floor(res.total / res.limit) + 1;
		// console.log('res.total:', res.total)
		// console.log('res.total:', res.limit)
		// console.log('field.pagination.total:', field.pagination.total)
		field.pagination.total = res.total
		field.pagination.page_size = res.limit;
		field.pagination.page = res.page;
		// console.log(field);
	})
})

</script>

<style lang="scss" scoped></style>
